<template>
  <el-container class="home-container">
    <el-header class="el-header">
      <TopBar />
    </el-header>
    <el-container class="el-container">
      <el-aside width="200px">
        <LeftBar />
      </el-aside>
      <el-main>
        <div>
          <input type="file" @change="handleFileUpload" accept=".txt">
          <button @click="submitFile">Submit</button>
          <div v-if="imageUrl">
            <img :src="imageUrl" alt="uploaded image">
          </div>
          <img src="../Image/cat.png" height="618" width="434"/>
          <div v-if="prediction">
            <h2>Prediction: {{ prediction }}</h2>
            <h3>Probability Distribution:</h3>
            <div v-for="(prob, label) in probability" :key="label">
              <p>{{ label }}: {{ prob }}</p>
              <div :style="{ width: prob * 100 + '%' }"></div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import TopBar from '@/components/TopBar'
import LeftBar from '@/components/LeftBar'
import axios from 'axios'

export default {
  name: 'RecognizeListImage',
  components: { TopBar, LeftBar },
  data () {
    return {
      file: null,
      prediction: null,
      probability: null
    }
  },
  methods: {
    handleFileUpload (event) {
      this.file = event.target.files[0]
    },
    submitFile () {
      const formData = new FormData()
      formData.append('file', this.file)

      axios.post('/api/recognize-ListImage', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        // 处理后端返回的响应数据
        this.prediction = response.data.prediction
        this.probability = response.data.probability
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped>
.el-header {
  padding: 0;
}
</style>
